<template>
    <form :class="formClass" @submit.prevent="submit">
        <slot></slot>
    </form>
</template>

<script>
export default{
    data(){
        return {
            list:{}
        }
    },
    emits:['submit'],
    provide() {
        return {
            addFormCheck:(name,check)=>{
                this.list[name] = check;
            },
            delFormCheck:(name)=>{
                delete this.list[name];
            },
            labelWidth:typeof this.labelWidth === 'number'? this.labelWidth + 'px' : parseInt(this.labelWidth)+'px'
        }
    },
    props:{
        dir:{
            type:String,
            default:'row' //column
        },
        lableAlign:{
            type:String,
            default:'left' //right
        },
        labelWidth:{
            type: [String,Number],
            default: 120
        },
    },
    computed:{
        formClass(){
            let classList = [];
            classList.push('bi-form-'+this.dir);
            classList.push('bi-form-lable-'+this.lableAlign);
            return classList;
        }
    },
    methods:{
        clear(){
            this.list = {};
        },
        check(){
            for(let name in this.list){
                let msg = this.list[name]();
                
                if(msg!=='' ) return false;
            }
            return true;
        },
        submit(){
           
            this.$emit('submit');
            return false;
        }
    }

}
</script>


<style>
.bi-form-row .form-item{
    display: flex;
    flex-direction: row;
}

.bi-form-row .form-item .form-item-label{
    line-height: 40px;
}

.bi-form-label-right .form-item .form-item-label{
    text-align: right;
}

.bi-form-row .form-item .form-item-content{
    flex: 1;
}
</style>